import { Rate } from 'antd';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import FilterCard from '@/pages/components/FilterCard/index';
import TableCard from './components/TableCard';
import type { FilterFormItemType, ValueType } from '@/pages/components/FilterCard/types/index.type';

const OrderEvaluation = () => {
  const customIcons: Record<number, React.ReactNode> = {
    1: <FrownOutlined />,
    2: <FrownOutlined />,
    3: <MehOutlined />,
    4: <SmileOutlined />,
    5: <SmileOutlined />,
  };
  const starOptions = [
    { label: '一星', value: 1 },
    { label: '一星半', value: 1.5 },
    { label: '二星', value: 2 },
    { label: '二星半', value: 2.5 },
    { label: '三星', value: 3 },
    { label: '三星半', value: 3.5 },
    { label: '四星', value: 4 },
    { label: '四星半', value: 4.5 },
    { label: '五星', value: 5 },
  ];
  // 自定义 Select 选择框内容
  const starOptionRender = ({ value }: { value: number }) => {
    return <Rate allowHalf disabled defaultValue={value} character={({ index = 0 }) => customIcons[index + 1]} />;
  };
  const filterFormList: FilterFormItemType[] = [
    { label: '评价内容', name: 'evaluationContent', type: 'input' },
    { label: '评价人', name: 'appraiser', type: 'input' },
    { label: '评价度', name: 'evaluationStar', type: 'select', options: starOptions, optionRender: starOptionRender },
  ];
  const onFilterCardFinish = (value: ValueType) => {
    console.log('🚀 ~ onFinish ~ value:', value);
  };
  const onFilterCardReset = () => {
    console.log('🚀 ~ onReset');
  };

  return (
    <div>
      <FilterCard filterFormList={filterFormList} onFinish={onFilterCardFinish} onReset={onFilterCardReset} />
      <TableCard />
    </div>
  );
};

export default OrderEvaluation;
